<template>
  <div class="chart-container">
    <div ref="chartRef" class="chart"></div>
    <div v-if="$route.path === '/page3'" class="conclusion-box">
      <h3>就业状态与远程工作频率</h3>
      <div v-html="conclusionContent"></div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import * as echarts from "echarts";
import axios from "axios";

const chartRef = ref(null);
const conclusionContent = ref(""); // 响应式变量，用于存储结论内容
const chartData = ref([]); // 响应式变量，用于存储图表数据

const chartApiUrl = "http://127.0.0.1:8080/api/emp-remote/stats";
const conclusionApiUrl = "http://127.0.0.1:8080/api/emp-remote/conclusion";

// 初始化图表
const initChart = () => {
  if (!chartRef.value) {
    console.error("chartRef.value is null. Please check the ref binding.");
    return;
  }
  const myChart = echarts.init(chartRef.value);

  const option = {
    title: {
      text: "就业状态人数统计",
      left: "center",
      textStyle: {
        fontSize: 22,
        fontWeight: "bold",
        color: "#b3d8ff"
      },
    },
    tooltip: {
      trigger: "axis",
      formatter: function (params) {
        const dataItem = chartData.value.find(item => item.employmentStatus === params[0].name);
        return (
            params[0].name +
            "<br>" +
            "数量: " +
            params[0].value +
            "<br>" +
            "远程频率: " +
            dataItem?.remoteWorkFrequency
        );
      },
      backgroundColor: "#1e2330",
      borderColor: "#1e90ff",
      borderWidth: 2,
      textStyle: {
        color: "#fff",
        fontSize: 16,
        fontWeight: "bold"
      }
    },
    xAxis: {
      type: "category",
      boundaryGap: false,
      data: chartData.value.map(item => item.employmentStatus),
      axisLine: {
        lineStyle: {
          color: "#1e90ff",
          width: 2
        }
      },
      axisLabel: {
        color: "#b3d8ff",
        fontWeight: "bold",
        fontSize: 14,
        textShadowColor: "#000",
        textShadowBlur: 4
      }
    },
    yAxis: {
      type: "value",
      axisLine: {
        lineStyle: {
          color: "#1e90ff",
          width: 2
        }
      },
      axisLabel: {
        color: "#b3d8ff",
        fontWeight: "bold",
        fontSize: 14,
        textShadowColor: "#000",
        textShadowBlur: 4
      },
      splitLine: {
        lineStyle: {
          color: "#1e90ff33"
        }
      }
    },
    series: [
      {
        name: "数量",
        type: "bar",
        smooth: true,
        data: chartData.value.map(item => item.count),
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: "#e0e6ed" },
            { offset: 0.5, color: "#b3d8ff" },
            { offset: 1, color: "#cce6ff" },
          ]),
          borderColor: "#b3d8ff",
          borderWidth: 1
        },
        emphasis: {
          itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: "#b3d8ff" },
              { offset: 0.7, color: "#cce6ff" },
              { offset: 1, color: "#e0e6ed" },
            ]),
            borderColor: "#b3d8ff",
            borderWidth: 2
          },
        },
        label: {
          show: true,
          color: '#b3d8ff',
          fontWeight: 'normal',
          fontSize: 13
        }
      }
    ]
  };

  myChart.setOption(option);
};

onMounted(async () => {
  try {
    // 从接口获取图表数据
    const chartResponse = await axios.get(chartApiUrl);
    if (chartResponse.data.code === 0) {
      chartData.value = chartResponse.data.data; // 将接口返回的图表数据存储到响应式变量中
      initChart(); // 初始化图表
    } else {
      console.error("图表接口返回错误：", chartResponse.data.message);
    }
  } catch (chartError) {
    console.error("获取图表数据失败：", chartError);
  }

  try {
    // 从接口获取结论内容
    const conclusionResponse = await axios.get(conclusionApiUrl);
    if (conclusionResponse.data.code === 0) {
      conclusionContent.value = conclusionResponse.data.data; // 将接口返回的结论内容存储到响应式变量中
    } else {
      console.error("结论接口返回错误：", conclusionResponse.data.message);
    }
  } catch (conclusionError) {
    console.error("获取结论内容失败：", conclusionError);
  }
});
</script>

<style scoped>
.chart-container {
  width: 100%;
  height: 100%;
  margin: 20px auto;
  border-radius: 15px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.chart {
  width: 100%;
  height: 100%;
}

.chart-container:hover {
  transform: scale(1.02);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3);
}

.conclusion-box {
  margin-top: 20px;
  padding: 15px;
  width: 90%;
  max-width: 800px;
  background: rgba(20, 40, 70, 0.95);
  border: 2px solid #1e90ff;
  border-radius: 8px;
  color: #fff;
}

.conclusion-box h3 {
  margin-bottom: 10px;
  font-size: 18px;
  color: #1e90ff;
  text-align: center;
}

.conclusion-box div {
  margin: 8px 0;
  line-height: 1.6;
  color: #fff;
  text-align: left;
}
</style>